<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <style>
      ul{
        list-style: none;
        width: 400px;
        padding: 0;
        margin: 100px auto;
      }
      li{
        width: 400px;
        height: 40px;
        line-height: 40px;
        border: 1px dashed #ccc;
        padding: 0 10px;
        background: #eee;
      }
      /* 进入：淡入,底部100px处上移 */
      /* 离开：淡出,下移底部100px处 */
      .v-enter,.v-leave-to{
        opacity: 0;
        transform: translateY(100px);
      }
      .v-enter-active,.v-leave-active{
        transition: all 1s;
        /* 让动画的元素不占位 */
        position: absolute;
      }
      /* 列表才有的状态类名 */
      /* 列表元素移动的时候，加动画 */
      .v-move{
        transition: all 1s;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <transition-group tag="ul">
        <li v-for="item in list" :key="item.id" @click="del(item.id)">{{item.name}}</li>
      </transition-group>
    </div>
    <script src="./vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          list: [
            {id:1, name: '周杰伦'},
            {id:2, name: '高圆圆'},
            {id:3, name: '刘德华'},
            {id:4, name: '张学友'}
          ]
        },
        methods: {
          del (id) {
            const index  = this.list.findIndex(item=>item.id===id)
            this.list.splice(index,1)
          }
        }
      })
    </script>
  </body>
</html>